<template>
  <div class="mp-link">
    <a-select
      :value="link"
      placeholder="请选择"
      :options="links"
      style="min-width: 160px"
      @select="checkEffect"
    />
    <component
      :is="action | selectTarget"
      v-model="visiable"
      :action-type="actionType"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { mp } from '@/const/links'
export default {
  name: 'BaseMpLink',
  filters: {
    selectTarget(t) {
      switch (t) {
        case 'select-goods':
          return 'Base-SelectGoods'
        case 'select-active':
          return 'Base-SelectActivity'
        case 'select-live':
          return 'Base-SelectLive'

        default:
          break
      }
    }
  },
  props: {
    link: {
      type: String,
      default: undefined
    },
    query: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visiable: false,
      action: '',
      actionType: ''
    }
  },
  computed: {
    ...mapState({
      setting: state => state.config.setting
    }),
    links() {
      return mp.map(link => {
        if (link.value.startsWith('live-') && this.setting.live_status === 0) {
          link.disabled = true
        }
        return link
      })
    }
  },
  methods: {
    checkEffect(value) {
      const link = this.links.find(link => {
        return link.value === value
      })
      this.action = link.effect ? link.effect.action : ''
      this.actionType = link.effect ? link.effect.type : ''
      if (this.action) this.visiable = true
      this.$emit('update:link', value)
    },
    handleConfirm(data) {
      const target = data[0]
      let query = []
      this.$emit('res', data)
      switch (this.link) {
        case 'goods-detail':
          query = [target.goods_id]
          break
        case 'active-laxin':
          query = [target.id]
          break
        case 'active-seckill':
          query = [target.id]
          break
        case 'active-new':
          query = [target.id]
          break
        case 'live-room':
          query = [target.roomid]
          break
      }
      this.$emit('update:query', query)
    },
    handleCancel() {
      this.$emit('update:link', '')
    }
  }
}
</script>
